<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
    * {
        margin: 0
    }
    html, body {
        height: 100%
    }
    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -155px
    }
    table.gridtable th {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666;
        background-color: #dedede
    }
    table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666;
        background-color: #fff
    }
    .middle {
        text-align: center;
        margin: 0 auto;
        width: 90%;
        height: auto
    }
    .info a {
        margin: 0 10px;
        text-decoration: none;
        color: green
    }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="middle">
        <h1 style="padding: 70px 0 20px;">ECharts效果</h1>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </div>
    <div class="push"></div>
</div>
</body>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        "calculable": true,
        "toolbox": {"show": true},
        "tooltip": {"trigger": "axis"},
        "legend": {"data": ["邮件营销", "联盟广告", "直接访问", "搜索引擎"]},
        "xAxis": [{"type": "category", "boundaryGap": false, "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}],
        "yAxis": [{"type": "value"}],
        "series": [{
            "smooth": true,
            "name": "邮件营销",
            "type": "line",
            "stack": "总量",
            "symbol": "none",
            "data": [120, 132, 301, 134, {"value": 90, "symbol": "droplet", "symbolSize": 5}, 230, 210]
        }, {
            "smooth": true,
            "name": "联盟广告",
            "type": "line",
            "stack": "总量",
            "symbol": "image://http://echarts.baidu.com/doc/asset/ico/favicon.png",
            "symbolSize": 8,
            "data": [120, 82, {
                "value": 201,
                "symbol": "star",
                "symbolSize": 15,
                "itemStyle": {
                    "normal": {
                        "label": {
                            "show": true,
                            "textStyle": {"fontSize": 20, "fontFamily": "微软雅黑", "fontWeight": "bold"}
                        }
                    }
                }
            }, {"value": 134, "symbol": "none"}, 190, {"value": 230, "symbol": "emptypin", "symbolSize": 8}, 110]
        }]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</html>
